
<template>
    <div :class="['drag-button', state === 1?'border-right trans':state === 2?'border-left trans':'']"
    @click.stop.prevent="click" @touchstart="touchstart($event)"
    @touchmove.stop.prevent="touchmove($event)" @touchend="touchend($event)" ref="self">
    <div class="drag-content">
      <img src="~/imgs/home.png">
    </div>
  </div>
</template>

<script>
export default {
  name: 'BasedragBtn',
  // props: {
  //   sticky: {
  //     type: Boolean,
  //     default: false
  //   }
  // },
  data () {
    return {
      self:"",
      state: 2,
      move_flag:0,
      sticky:""
    }
  },
  watch:{
    $route:{
      handler:function(r){
        var _this = this;
        _this.sticky = r.path === "/index" ? false :true;
          _this.$nextTick(_=>{
            if (_this.$refs['self']) {
              if (_this.sticky ) {
                _this.$refs['self'].style.display="block";
              } else {
                  _this.$refs['self'].style.display="none"
              }
            }
          })
      },
      immediate:true,
      deep:true
    }
  },
  mounted () {
    var _this = this
    this.self = this.$refs['self']
    this.windowWidth = document.body.clientWidth
    this.windowHeight = document.body.clientHeight
    this.halfSelfWidth = this.self.offsetWidth / 2
    this.halfSelfHeight = this.self.offsetHeight / 2
    this.self.style.left = this.windowWidth - this.halfSelfWidth * 2 + 'px'
    this.self.style.top = (this.windowHeight - 300) + 'px'
    window.addEventListener("orientationchange",
    function(event)
    {
      if (window.orientation == 0 || window.orientation == 180) {
        _this.$refs['self'].style.display="block"
        return false;
      }else if (window.orientation == 90 || window.orientation == -90) {
        _this.$refs['self'].style.display="none"
        return false;
      }
    },
    false);
  },
  methods: {
    click () {
      if (this.move_flag == 2){
        this.move_flag = 0
        return
      } else {
        this.$router.push({ path: '/' })
      }
    },
    touchstart (e) {
    },
    touchmove (e) {
      this.move_flag = 2;
      if (this.state !== 0) {
        this.state = 0
      }
      const targetX = e.targetTouches[0].clientX
      const targetY = e.targetTouches[0].clientY
      if (this.halfSelfWidth < targetX && targetX < this.windowWidth - this.halfSelfWidth) {
        this.self.style.left = (targetX - this.halfSelfWidth) + 'px'
      }
      if (this.halfSelfHeight < targetY && targetY < this.windowHeight - this.halfSelfHeight) {
        this.self.style.top = (targetY - this.halfSelfHeight) + 'px'
      }
    },
    touchend (e) {
      if (this.sticky) {
        if (parseInt(this.self.style.left) + this.halfSelfWidth <= this.windowWidth / 2) {
          this.self.style.left = '0px'
          this.state = 1
        } else {
          this.self.style.left = this.windowWidth - this.halfSelfWidth * 2 + 'px'
          this.state = 2
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .drag-button {
    width: 1.3rem;
    height: 1.3rem;
    position: fixed;
    z-index: 100;
    font-size: 12px;
    color: #ffffff;
    background-color: #2e7ef7;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #d3d3d3;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0px 1px 10px #c8b4b4;
    .drag-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        // border-radius: 50%;
        user-select: none;
        pointer-events: none;
      }
    }
    .drag-content:active {
      background-color: rgba(0, 0, 0, .2)
    }
  }
  .border-right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.65rem;
    border-bottom-right-radius: 0.65rem;
    border-left: none;
  }
  .border-left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.65rem;
    border-bottom-left-radius: 0.65rem;
    border-right: none;
  }
  .trans {
    transition: left .3s;
  }
</style>
